<script setup>
import { onMounted, nextTick, ref, reactive, watch } from 'vue'
import axios from 'axios';
import { a, f2 } from "./BasicType/b"
// 引入json
import world from "../assets/json/nationalBoundaryLine-10.json"
console.log(world);

const url = "/api"
let c
let ctx
let start = [],
  goal = [],
  currentPath = []
// let msg="安安生生的：撒旦撒旦"

onMounted(() => {
  let a = null //null 数值运算时，变成0
  let b //undefined 数值运算时，变为NaN,然后怎么搞都是NaN
  let c="5"
  console.log(typeof(b+5),isNaN(b+6));

  c = document.getElementById("myCanvas");
  ctx = c.getContext("2d");
  ctx.fillStyle = "black";
  // ctx.fillRect(400, 40, 30, 500);
  ctx.fillRect(405, 45, 20, 490);
  // ctx.fillRect(394, 53, 4, 4);

  let num = 0
  for (let i = 0; i < 1000000; i++) {
    if (Math.random() >= 0.9) {
      num++
    }
    // console.log(Math.random());
  }
  console.log((num / 1000000 - 0.1) * 100 + "% ");
})

const drawLine = (lines) => {
  currentPath.forEach((item, idx) => {
    ctx.fillStyle = "white";
    ctx.fillRect(currentPath[idx][0], currentPath[idx][1], 2, 2);
  })
  // var w = c.width;
  // var h = c.height;
  // c.width = w;
  // c.height = h;

  // ctx.fillStyle = "#FF0000";
  // ctx.fillRect(400, 40, 30, 500);

  let start = [], end = []
  ctx.fillStyle = "blue";
  lines.forEach((item, idx) => {
    if (start = []) {
      start = item
    }
    ctx.fillRect(lines[idx][0], lines[idx][1], 2, 2);
  })
  currentPath = lines
},
  drawPoint = (points) => {
    points.forEach(item => {
      ctx.fillStyle = "#ccc";
      ctx.fillRect(item[1], item[2], 1, 1);
    })
  },
  addPoint = (e) => { 
    if (radio1.value == "2") {
      if (e.x > 400 && e.x < 430 && e.y > 40 && e.y < 540) {
        ctx.fillStyle = "white";
      }
      axios({
        method: "post",
        data: {
          changePoint: [[e.x - 10, e.y - 10], [e.x + 10, e.y + 10]]
        },
        url: url + "/star/lpa"
      }).then(res => {
        drawLine(res.data.data.lines)
        ctx.fillStyle = "black";
        ctx.fillRect(e.x - 10, e.y - 10, 20, 20);
      })
    } else {
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(e.x - 2, e.y - 2, 4, 4);

      if (start.length == 0 || goal.length != 0) {
        start = [e.x, e.y]
      } else {
        let num1 = 0
        goal = [e.x, e.y]
        axios({
          method: "post",
          data: {
            start: start,
            goal: goal,
            barrier: [[400, 40], [430, 540]]
          },
          url: url + "/star/base"
        })
          .then(res => {
            drawLine(res.data.data.lines)
            start = []
            goal = []
          })
      }
    }

  }

const radio1 = ref("1")
</script>

<template>
  <!-- <span id="s1"></span> -->
  <!-- <div style="margin: 10px;width: 400px;height: 760px;font-family: '宋体';line-height: 30px;">
    <div style="height: 100%;width: 100%;">
      <div style="display: flex;">
        <p class="title">海堤类型:</p>
        <p class="content">浆砌石挡土墙</p>
      </div>
      <div style="display: flex;margin-top: 15px;">
        <p class="title">海堤详情:</p>
        <p class="content" style="width: calc(100% - 68px);">
          浆砌石挡土墙 石河南岛海堤2段海堤采用浆砌石挡土墙结构，其后为土堤。挡土墙顶宽0.5m，迎水坡为直立墙，顶部设0.2m的混凝土压顶。挡土墙前采取PE笼包卵石增加基础稳定，根据挡土墙结构特点，沿墙每隔15m设一伸缩缝，缝宽0.02m，缝内填塞沥青木板。2段在调查过程中发现1处挡墙损毁
        </p>
      </div>
    </div>
  </div> -->

  <div style="display: flex;">
    <canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;margin-right: 10px;"
      @click="addPoint"></canvas>
    <div>
      <el-radio-group v-model="radio1">
        <el-radio label="1" size="large" border>寻路</el-radio>
        <el-radio label="2" size="large" border>改地形</el-radio>
      </el-radio-group>
    </div>
  </div>

</template>

<style lang='less'>
.title {
  color: darkturquoise;
  font-size: 14px;
}

.content {
  font-size: 14px;
}
</style>